* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #fff;
}

.container {
  width: 80%;
  margin: 1em auto;
  font-family: '行楷-简', Courier, monospace;
  line-height: 2;
  text-indent: 2em;
  position: relative;
}

.eraser {
  position: absolute;
  left: 0;
  top: 0;
}
.text {
  --p: 0%;
  background: linear-gradient(
    to right,
    #0000 var(--p),
    #000 calc(var(--p) + 30px)
  );
  color: transparent;
  animation: erase 5s linear forwards;
}

@property --p {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

@keyframes erase {
  to {
    --p: 100%;
  }
}
